<template>
	<view class="content">
		<Layout type="detail">
			<template #title>
				<text>产品详情</text>
			</template>
			<template #top>
				<swiper class="swiper" circular indicator-dots autoplay interval="10000" duration="500" 
					indicator-color="#feeeee" indicator-active-color="#ffffff">
					<swiper-item>
						<image mode="scaleToFill" class="swiper-img" src="../../static/imgs/banner1.jpg"></image>
					</swiper-item>
					<swiper-item>
						<image mode="scaleToFill" class="swiper-img" src="../../static/imgs/banner2.jpg"></image>
					</swiper-item>
				</swiper>
			</template>
			<template #bottom>
				<view class="btm-detail">
					<view class="goods-name">西湖牌明前特级精选龙井茶</view>
					<view class="goods-type">
						<view class="goods-type-info">
							<view>100g</view>
							<view>净含量</view>
						</view>
						<view class="line-vertical"></view>
						<view class="goods-type-info">
							<view>浓香型</view>
							<view>香型</view>
						</view>
						<view class="line-vertical"></view>
						<view class="goods-type-info">
							<view>茶香浓郁，层次丰富</view>
							<view>口感</view>
						</view>
					</view>
					<view class="evaluations">
						<view class="evaluations-bar">
							<text>商品评价</text>
							<view>
								<text>全部评价</text>
								--
							</view>
						</view>
						<EvaluationItem v-for="(item, index) in evaluations" :key="index" :data="item" />
					</view>

					<view class="goods-detail-info">
						<view class="detail-info-title">商品详情</view>
						<rich-text :nodes="richText"></rich-text>
					</view>
				</view>
			</template>
		</Layout>
	</view>

	<view class="bottom-bar">
		<view class="cart-icon">
			<image mode="scaleToFill" src=""></image>
			<text>购物车</text>
			<view class="cart-num">20</view>
		</view>

		<view class="add-to-cart">
			加入购物车
		</view>

		<view class="buy-now">
			立即购买
		</view>
	</view>

	<view class="nav-bar">
		<view class="nav-item-active">商品</view>
		<view>评价</view>
		<view>详情</view>
	</view>
</template>

<script setup>
	import Layout from "@/layout/index.vue"
	import EvaluationItem from "@/components/evaluation/EvaluationItem.vue"
	import { ref } from "vue"

	const evaluations = ref([
		{
			name: "喝茶的牛",
			avatar: "",
			content: "打开包装就能闻到茶香，非常好的茶叶",
		},
		{
			name: "喝茶的牛2",
			avatar: "",
			content: "打开包装就能闻到茶香，非常好的茶叶2",
		}
	])
	const richText = ref(`<div style="text-align:center;">
		<img style="width: 80%;" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/>
		<img style="width: 80%;" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/>
		<img style="width: 80%;" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/>
	</div>`)

	const activeBar = ref(0)
</script>

<style scoped lang="scss">
.nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 48rpx;
	width: 750rpx;
	height: 108rpx;
	background-color: #fffcf5;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 103rpx 34rpx 103rpx;
	line-height: 50px;
	font-size: 36rpx;
	color: #333333;
	.nav-item-active {
		font-size: 36rpx;
		line-height: 48rpx;
		color: #cd9a4a;
		margin-right: 50rpx;
	}
}
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 750rpx;
	height: 130rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	.cart-icon {
		margin-right: 92rpx;
		position: relative;
		.cart-num {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: #ff7f50;
			color: #fff;
			font-size: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		image {
			width: 52rpx;
			height: 41rpx;
		}
		>text {
			font-size: 22rpx;
			color: #b99364;
			line-height: 31rpx;
		}
	}
	.add-to-cart {
		width: 240rpx;
		height: 90rpx;
		background-color: #fffcf5;
		border: 1rpx solid #ddb16f;
		border-radius: 56rpx;
		font-size: 32rpx;
		color: #ddb16f;
		text-align: center;
		line-height: 90rpx;
		margin-right: 30rpx;
	}
	.buy-now {
		width: 240rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: linear-gradient(270deg,#cd9746, #dfc692);
		border-radius: 56rpx;
		font-size: 32rpx;
		color: #fff;
	}
}
.content {
	background-color: #ffeac1;
	.swiper {
		height: 800rpx;
		.swiper-img {
			height: 100%;
			width: 750rpx
		}
	}
	.btm-detail {
		background-color: #FFEAC1;
		transform: translateY(435rpx);
		padding-bottom: 200rpx;

		.goods-detail-info {
			background-color: #fff;
			padding: 10rpx 10rpx  30rpx 10rpx;
			border-radius: 20rpx;
			width: 724rpx;
			margin: 24rpx auto 0 auto;
			.detail-info-title {
				font-size: 30rpx;
				color: #333333;
				line-height: 41rpx;
				padding: 30rpx 0 20rpx 20px;
			}
		}
		.goods-name {
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			padding: 40rpx;
		}
		.goods-type {
			width: 724rpx;
			background-color: #fffcf5;
			border-radius: 20rpx;
			display: flex;
			text-align: center;
			align-items: center;
			padding: 34rpx 0;
			margin: 0 auto;
			.goods-type-info {
				flex-grow: 1;
				view {
					&:first-child {
						font-size: 30rpx;
						color: #333333;
						line-height: 41rpx;
						margin-bottom: 13rpx;
					}
					&:last-child {
						font-size: 24rpx;
						color: #333333;
						line-height: 33rpx;
						opacity: 0.63;
					}
				}
			}
			.line-vertical {
				width: 1rpx;
				height: 74rpx;
				opacity: 0.5;
				background-color: #ddb16e;
			}
		}
		.evaluations {
			width: 724rpx;
			background-color: #fffcf5;
			border-radius: 20rpx;
			padding: 40rpx 30rpx;
			margin: 24rpx auto 0 auto;

			.evaluations-bar {
				display: flex;
				align-items: center;
				justify-content: space-between;
				>text {
					color: #333333;
					line-height: 41rpx;
					font-size: 30rpx;
				}
				>view {
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
				}
			}
		}
	}
}
</style>
